<script lang="ts" setup>

import {Calendar, Delete, Edit, Message, QuestionFilled, Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {ref} from "vue";
import type { ComponentSize } from 'element-plus'
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const data=reactive({
    input:null,
    fruits:['apple','banana','orange']
})
//导入assets下的图片
import L01 from "./assets/lb01.jpg"
import L02 from "./assets/lb02.jpg"
import L03 from "./assets/lb03.jpg"
const lb=reactive({
  imgs:[L01,L02,L03]
})
const tableData = [
  {
    id: '1',
    name: '软件开发部',
    createtime:'2033-02-09 15:17:33',
    updatetime:'2039-02-09 15:17:33',
    bian:'编辑',
    shan:'删除'
  },
  {
    id: '2',
    name: '系统运维部',
    createtime:'2033-02-09 15:17:33',
    updatetime:'2039-02-09 15:17:33',
    bian:'编辑',
    shan:'删除'
  },
  {
    id: '3',
    name: '网络技术部',
    createtime:'2033-02-09 15:17:33',
    updatetime:'2039-02-09 15:17:33',
    bian:'编辑',
    shan:'删除'
  },
  {
    id: '4',
    name: '数据中心部',
    createtime:'2033-02-09 15:17:33',
    updatetime:'2039-02-09 15:17:33',
    bian:'编辑',
    shan:'删除'
  },
  {
    id: '5',
    name: '技术支持部',
    createtime:'2033-02-09 15:17:33',
    updatetime:'2039-02-09 15:17:33',
    bian:'编辑',
    shan:'删除'
  }
]
</script>

<template>
  <div style="margin: 30px" >
    <el-carousel height="300px" style="width: 500px">
      <el-carousel-item v-for="item in lb.imgs" :key="item">
        <img :src="item" style="width: 100%">
      </el-carousel-item>
    </el-carousel>
  </div>
  <div style="margin: 30px">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="Id" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="createtime" label="createTime" />
      <el-table-column prop="updatetime" label="updateTime" />
      <el-table-column prop="bian"/>
      <el-table-column prop="shan"/>
    </el-table>
  </div>
</template>

<style scoped>

</style>